<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <script src="../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

    <div id="app">
        <!-- v-model 表单数据双向绑定 -->
        <h2>输入文本框</h2>
        <input type="text" name="msg" v-model="msg" value="">
        <p>{{msg}}</p>

        <hr>
        <h2>复选框</h2>
        <!-- <span> 标签被用来组合文档中的行内元素。 -->
        <span v-for="item in fruits">
            <input type="checkbox" name="cfruits" v-model="selectFruits" :value="item">
            {{item}}
        </span>
        <p>{{selectFruits}}</p>

        <hr>
        <h2>单选框</h2>
        <span v-for="item in fruits">
            <input type="radio" name="rfruits" v-model="selectFruit" :value="item">
            {{item}}
        </span>
        <p>{{selectFruit}}</p>

        <hr>
        <h2>选项框</h2>
        <select name="fruits"  v-model="chooseFruits">
            <option v-for="item,key in fruits" :value="item">{{item}}</option>
        </select>
        <p>{{chooseFruits}}</p>
    </div>

    <script type="text/javascript">
        // console.log(Vue)
        let app = new Vue({
            el: "#app",
            data: {
                msg: "hello vue",
                fruits:["苹果","香蕉","橘子"],
                selectFruits:[],
                selectFruit:'',
                chooseFruits:""
            },
            created(){
                console.log('are you ok')
                this.chooseFruits = this.fruits[0]
            }

        })
    </script>
</body>

</html>